<template>
  <div class="box">
    <div class="right">
      <p>您好,您发布的房子,我想具体咨询一下</p>
      <img
        src="https://img0.baidu.com/it/u=3880341262,3308316348&fm=26&fmt=auto&gp=0.jpg"
      />
    </div>
    <div class="left">
      <img :src="img" />
      <p>哪个小区的房子</p>
    </div>
    <div class="keyCode">
      <p><input type="text" /><button @click="getkey()">+</button></p>
    </div>
  </div>
</template>

<script>
import { getAgentlist } from "../../services/index";
export default {
  data() {
    return {
      img: "",
    };
  },
  //获取经纪人列表
  async onLoad(options) {
    let list = await getAgentlist();
    //获取详情id
    let id = options.id;
    //过滤
    let res = list.data.list.filter((item) => item.brokerid == id)[0];
    this.img = res.brokerimg;
  },
  methods: {
    //获取键盘
    getkey() {
      wx.hideKeyboard({
        complete: (res) => {
          console.log("hideKeyboard res", res);
        },
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.box {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  .right {
    width: 100%;
    height: 150rpx;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    img {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
    }
    p {
      width: 600rpx;
      margin-right: 20rpx;
      background: #f5f5f5;
      border-radius: 10rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
    }
  }
  .left {
    width: 100%;
    height: 150rpx;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    img {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
    }
    p {
      width: 300rpx;
      background: green;
      border-radius: 10rpx;
      height: 80rpx;
      line-height: 80rpx;
      margin-left: 20rpx;
      text-align: center;
    }
  }
  .keyCode {
    width: 100%;
    display: flex;
    position: fixed;
    bottom: 0rpx;
    left: 0rpx;
    p:nth-child(1) {
      width: 100%;
      height: 80rpx;
      display: flex;
      justify-content: space-around;
      align-items: center;
      background: #ccc;
      input {
        width: 500rpx;
        height: 50rpx;
        background: #f5f5f5;
        margin-left: 50rpx;
      }
      button {
        background: #ccc;
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #f5f5f5;
      }
    }
  }
}
</style>